@namespace BulmaRazor.Components
@typeparam TItem
@using BulmaRazor.Utils
@using System.Diagnostics
@inherits BulmaComponentBase

@if (WithContainer)
{
    <div class="table-container">
        @RenderTable
    </div>
}
else
{
    @:@RenderTable
}
<CascadingValue Value="this" IsFixed="true">
    @(ChildContent ?? ColumnsSlot)
</CascadingValue>

@code{

    RenderFragment<DataTableColumn> RenderHeaderContent => col =>
        @<span>
            @if (col.ThSlot != null)
            {
                @:@col.ThSlot
            }
            else
            {
                @:@col.Label 
            }
        </span>;

    RenderFragment RenderTable =>
        @<table @attributes="Attributes" class="@classes">
            @if (!NoHeader)
            {
                <thead>
                <tr>
                    @foreach (var col in columns)
                    {
                        <th class="@B.Join(col.ThClass, ThClass)" style="@B.JoinStyle(col.ThStyle, ThStyle)">

                            @if (col.IsCheckBox)
                            {
                                <IconCheckBox Color="Color" OnChange="CheckAllRows" Checked="col.CheckedAll"></IconCheckBox>
                                @RenderHeaderContent(col)
                            }
                            else
                            {
                                if (col.Sortable)
                                {
                                    <IconText class="@B.Clickable" @onclick="() => Sort(col)">
                                        @RenderHeaderContent(col)
                                        <Icon class="@getSortIconClass(col)" IconClass="@getSortIconClassName(col)"></Icon>
                                    </IconText>
                                }
                                else
                                {
                                    @:@RenderHeaderContent(col)
                                }
                                if (col.Filterable)
                                {
                                    <Dropdown @bind-IsActive="col.FilterShow" IsRight IsClickTrigger
                                               class="@B.PulledRight"
                                               ContentStyle="max-height: 300px;overflow-y: auto; font-weight:lighter">
                                        <TriggerSlot>
                                            &nbsp;<Icon class="@getFilterIconClass(col)" IconClass="fa fa-filter"></Icon>&nbsp;
                                        </TriggerSlot>
                                        <MenuSlot>

                                            @foreach (var filterItem in col.FilterItems)
                                            {
                                                <DropdownItem>
                                                    <IconCheckBox Color="Color" class="is-inline is-clickable" IsSmall="IsNarrow" @bind-Checked="filterItem.Checked">
                                                        <span class="ml-1 has-text-grey">@filterItem.Value</span>
                                                    </IconCheckBox>
                                                </DropdownItem>
                                            }
                                            <DropdownDivider class="@B.MY1"/>
                                            <DropdownItem>
                                                <Buttons>
                                                    <Button IsSmall="IsNarrow" Color="Color" @onclick="() => Filter(col)">筛选</Button>
                                                    <Button IsSmall="IsNarrow" @onclick="() => ResetFilter(col)">重置</Button>
                                                </Buttons>
                                            </DropdownItem>
                                        </MenuSlot>
                                    </Dropdown>
                                }
                            }
                        </th>
                    }
                </tr>
                </thead>
            }
            <tbody>
            @foreach (var row in dataView)
            {
                if (row.IsHidden) continue;
                DataTableColumn expandColumn = null;
                <tr class="@CssBuilder.Css(B.Selected, row.IsSelected)" @onclick="() => TrClick(row)">
                    @foreach (var col in columns)
                    {
                        var tdContent = col.ChildContent ?? col.TdSlot;
                        <td class="@B.Join(col.TdClass, TdClass)" style="@B.JoinStyle(col.TdStyle, TdStyle)">
                            @if (col.IsIndex)
                            {
                                @:@(row.Index + 1)
                            }
                            else if (col.IsCheckBox)
                            {
                                <span>
                                    <IconCheckBox Color="Color" Checked="row.IsChecked" OnChange="b => CheckBoxClick(row, b)"></IconCheckBox>
                                    @tdContent?.Invoke(row.Item)
                                </span>
                            }
                            else if (col.IsExpand)
                            {
                                expandColumn = col;
                                if (row.IsExpanded)
                                {
                                    <Icon class="@B.Clickable" @onclick="() => TaggleExpand(row)" IconClass="fa fa-angle-down"></Icon>
                                }
                                else
                                {
                                    <Icon class="@B.Clickable" @onclick="() => TaggleExpand(row)" IconClass="fa fa-angle-right"></Icon>
                                }
                            }
                            else
                            {
                                if (tdContent != null)
                                {
                                    @:@tdContent(row.Item)
                                }
                                else
                                {
                                    @:@row.GetShowValue(col.Prop)
                                }
                            }
                        </td>
                    }
                </tr>
                if (expandColumn != null && row.IsExpanded)
                {
                    <tr>
                        <td colspan="@columns.Count">
                            @ExpandSlot(row.Item)
                        </td>
                    </tr>
                }
            }
            @if (dataView.Count == 0 && EmptySlot != null)
            {
                <tr>
                    <td class="@B.TextCentered" colspan="@columns.Count">
                        @EmptySlot
                    </td>
                </tr>
            }
            </tbody>
        </table>;

}